import { Meta, StoryObj } from "@storybook/react/*";
import { action } from "@storybook/addon-actions";
import Button from "./button";
import { ComponentProps } from "react";
import { fn } from "@storybook/test";

type StoryProps = ComponentProps<typeof Button>;

/** 导出Storybook所需的 meta data */
const meta: Meta<StoryProps> = {
    component: Button,
    title: 'Components/Button',
    tags: ['autodocs'],
    parameters: {
        layout: 'centered',
    },
    argTypes: {
        btnType: {
            options: ['primary', 'default', 'danger', 'link'],
            description: 'Button组件的类型',
            control: {
                type: 'select',
            }
        },
        size: {
            options: ['lg', 'sm'],
            control: {
                type: 'select',
            }
        }
    },
    // 放在这里属性值最终会传到每个Story的args中
    args: {
        onClick: fn(),
    }
}

export default meta;

type Story = StoryObj<StoryProps>;

export const Default: Story = {};

export const Primary: Story = {
    args: {
        btnType: 'primary',
        children: '主要按钮'
    }
}




// const meta = {
//     title: 'Components/Button',
//     component: Button,
//     tags: ['autodocs'],
//     args: {
//         btnType: 'primary',
//     },
//     parameters: {
//         docs: {
//             description: {
//                 component: '这是一个按钮组件，支持点击事件。',
//             }
//         }
//     }
// } satisfies Meta<typeof Button>
// export default meta;
// type Story = StoryObj<typeof meta>;

// export const DefaultProps: Story = {
//     name: '默认按钮',
//     args: {}
// }

// export const ButtonWithSize: Story = {
//     name: '不同尺寸的Button',
//     render: () => (
//         <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
//             <Button size='lg' onClick={action('按钮被点击了')}>large button</Button>
//             <Button size='sm'>small button</Button>
//         </div>
//     )
// }

// export const ButtonWithType: Story = {
//     name: '不同类型的Button',
//     render: () => (
//         <div style={{ display: 'flex', gap: '10px' }}>
//             <Button btnType='primary'>primary button</Button>
//             <Button btnType='danger'>danger button</Button>
//             <Button btnType='link'>link button</Button>
//         </div>
//     )
// }